<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="asset\set.css">
    <link rel="stylesheet" href="css/message.css">
    <link rel="stylesheet" href="icon\iconfont\iconfont.css">    
    <title>Message</title>
</head>
<body>
    <div class="container">
        <header>
            <img src="img/head_portrait.png" onclick="location.href='functions.html'">
            <div class="name_status">
                <p class="name">我</p>
                <div class="status">
                    <i class="i ic:book"></i>
                    <span class="content">学习中</span>
                    <i class="i ic:arrow-right"></i>
                </div>
            </div>
            <div class="right-icon">
                <img src="iconfont-img/unknown.ico">
                <i class="i ic:add"></i>
            </div>
        </header>
        <div class="search">
            <div class="search-box" onclick="location.href='search.html'">
                <i class="i ic:search"></i>
                <span>搜索</span>
            </div>
        </div>
        <ul class="item-list">
            <li>
                <div class="left">
                    <img src="img/wethwer.png">
                    <div class="info">
                    <p>QQ天气</p>
                    <p class="detail">【呈贡区雷电黄色预警】于13:48发布,请注意</p>
                    </div>
                </div>
                <div class="right">
                    <p>14:00</p>
                </div>
            </li>
            <li onclick="location.href='send-message.html'">
                <div class="left">
                    <img src="img/pc.png">
                    <div class="info">
                    <p>我的电脑</p>
                    <p class="detail">你已在电脑登录。可传文件到电脑</p>
                    </div>
                </div>
                <div class="right">
                    <p>13:00</p>
                </div>
            </li>
            <li>
                <div class="left">
                    <img src="img/wallet.png">
                    <div class="info">
                    <p>QQ钱包</p>
                    <p class="detail">售卖中</p>
                    </div>
                </div>
                <div class="right">
                    <p>15:00</p>
                </div>
            </li>
            <li>
                <div class="left">
                    <img src="img/mailbox.png">
                    <div class="info">
                    <p>QQ邮箱提醒</p>
                    <p class="detail">您有未读邮件</p>
                    </div>
                </div>
                <div class="right">
                    <p>14:30</p>
                </div>
            </li>
            <li>
                <div class="left">
                    <img src="img/mailbox.png">
                    <div class="info">
                    <p>QQ邮箱提醒</p>
                    <p class="detail">您有未读邮件</p>
                    </div>
                </div>
                <div class="right">
                    <p>14:30</p>
                </div>
            </li>
            <li>
                <div class="left">
                    <img src="img/mailbox.png">
                    <div class="info">
                    <p>QQ邮箱提醒</p>
                    <p class="detail">您有未读邮件</p>
                    </div>
                </div>
                <div class="right">
                    <p>14:30</p>
                </div>
            </li>
            <li>
                <div class="left">
                    <img src="img/mailbox.png">
                    <div class="info">
                    <p>QQ邮箱提醒</p>
                    <p class="detail">您有未读邮件</p>
                    </div>
                </div>
                <div class="right">
                    <p>14:30</p>
                </div>
            </li>
            <li>
                <div class="left">
                    <img src="img/mailbox.png">
                    <div class="info">
                    <p>QQ邮箱提醒</p>
                    <p class="detail">您有未读邮件</p>
                    </div>
                </div>
                <div class="right">
                    <p>14:30</p>
                </div>
            </li>
            <li>
                <div class="left">
                    <img src="img/mailbox.png">
                    <div class="info">
                    <p>QQ邮箱提醒</p>
                    <p class="detail">您有未读邮件</p>
                    </div>
                </div>
                <div class="right">
                    <p>14:30</p>
                </div>
            </li>
            <li>
                <div class="left">
                    <img src="img/mailbox.png">
                    <div class="info">
                    <p>QQ邮箱提醒</p>
                    <p class="detail">您有未读邮件</p>
                    </div>
                </div>
                <div class="right">
                    <p>14:30</p>
                </div>
            </li>
        </ul>
        <ul class="menu">
            <li>
                <i class="i ic:message" id="selected"></i>
                <p>消息</p>
            </li>
            <li onclick="location.href='contact.html'">
                <i class="i ic:contacts"></i>
                <p>联系人</p>
            </li>
            <li onclick="location.href='dynamic.html'">
                <img src="iconfont-img/dynamic.ico" alt="">
                <p>动态</p>
            </li>
        </ul> 
    </div>
</body>
</html>